<template>
  <view class="custom-navbar">
    <view class="navbar-content" :style="{ paddingTop: statusBarHeight + 'px' }">
      <!-- 左侧按钮区域（非 TabBar 页面显示） -->
      <view class="navbar-left" v-if="showLeftButtons && title !== '登录'">
        <view class="nav-btn" @click="goBack">
          <image class="nav-icon" src="/static/icons/icon-back.png" mode="aspectFit" />
        </view>
        <view class="nav-btn" @click="goHome">
          <image class="nav-icon" src="/static/icons/icon-goHome.png" mode="aspectFit" />
        </view>
      </view>
      <!-- 标题 -->
      <view class="navbar-title">{{ title }}</view>
      <!-- 右侧胶囊按钮透明背景区域 -->
      <view class="navbar-right" :style="{ width: menuButtonWidth + 'px', height: menuButtonHeight + 'px' }"></view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})

const statusBarHeight = ref(0)
const menuButtonWidth = ref(87) // 胶囊按钮默认宽度（rpx转px约87px）
const menuButtonHeight = ref(32) // 胶囊按钮默认高度（rpx转px约32px）

// TabBar 页面路径列表
const tabBarPages = ['/pages/index/index', '/pages/service/service', '/pages/profile/profile']

// 判断是否显示左侧按钮（非 TabBar 页面显示）
const showLeftButtons = computed(() => {
  try {
    const pages = getCurrentPages()
    if (pages && pages.length > 0) {
      const currentPage = pages[pages.length - 1]
      if (currentPage && currentPage.route) {
        const currentPath = '/' + currentPage.route
        return !tabBarPages.includes(currentPath)
      }
    }
  } catch (error) {
    console.error('判断页面类型失败:', error)
  }
  return true // 默认显示，确保非 TabBar 页面都能显示
})

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  statusBarHeight.value = windowInfo.statusBarHeight || 0
  
  // 获取胶囊按钮位置信息
  try {
    // #ifdef MP-WEIXIN
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    if (menuButtonInfo) {
      menuButtonWidth.value = menuButtonInfo.width || 87
      menuButtonHeight.value = menuButtonInfo.height || 32
    }
    // #endif
  } catch (error) {
    console.error('获取胶囊按钮信息失败:', error)
  }
})

// 返回上一页
const goBack = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    uni.navigateBack({
      delta: 1
    })
  } else {
    // 如果没有上一页，跳转到首页
    goHome()
  }
}

// 返回首页
const goHome = () => {
  uni.switchTab({
    url: '/pages/index/index',
    fail: () => {
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }
  })
}
</script>

<style scoped>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  background: transparent;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 44px;
  height: 44px;
  padding: 0 20rpx;
}

.navbar-left {
  position: absolute;
  left: 20rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.nav-btn {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx;
}

.nav-icon {
  width: 100%;
  height: 100%;
}

.navbar-title {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  text-align: center;
  flex: 1;
}

.navbar-right {
  position: absolute;
  right: 20rpx;
  background: transparent;
  pointer-events: none;
}
</style>

